<script setup lang="ts">
  import { getPersonal, editPersonal } from '@/api/userCenter';
  import { ref } from 'vue';
  import { useUserStore } from '@/store';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { isArray, omit } from 'lodash';
  import { deepClone } from '@arco-vue-pro-components/pro-components/es/pro-table/utils';
  const formRef = ref<FormInstance | null>(null);
  const userStore = useUserStore();
  const { loading, setLoading } = useLoading(false);
  const formType = ref([
    {
      label: '姓名',
      name: 'user_name',
      tooltip: '用于讨论区交流等',
      fieldProps: {
        span: 12,
        disabled: true,
        placeholder: '请输入',
        showWordLimit: true,
        allowClear: true,
        maxLength: 30,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      label: '真实姓名',
      name: 'user_nick_name',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        showWordLimit: true,
        allowClear: true,
        maxLength: 30,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    // {
    //   label: '头像',
    //   type: 'a-upload',

    //   name: 'user_avatar',
    //   slotName: 'images',
    //   fieldProps: {
    //     span: 24,
    //   },
    // },
    {
      label: '头像',
      name: 'user_avatar',
      tooltip:
        '小头像文件要求是gif、jpg、png格式，大小不能超过20*20像素。\n' +
        '小头像主要用于邮件列表、微讯列表等的显示。',
      type: 'a-upload',
      slotName: 'images',
      fieldProps: {
        span: 24,
        multiple: false,
        limit: 1,
        maxCount: 1,
      },
      rules: [
        {
          message: '请选择文件',
          required: true,
        },
      ],
    },
    {
      label: '性别',
      type: 'a-select',
      name: 'user_gender',
      fieldProps: {
        span: 12,
        placeholder: '请选择',
      },
      selectOptions: [
        {
          value: 2,
          label: '男',
        },
        {
          value: 3,
          label: '女',
        },
      ],
    },
    {
      label: '生日',
      name: 'user_birthday',
      type: 'a-date-picker',
      fieldProps: {
        span: 12,
        placeholder: '请选择',
      },
    },
    {
      label: '手机号码',
      name: 'user_mobile',
      type: 'a-input',
      fieldProps: {
        maxLength: 11,
        span: 12,
        placeholder: '请选择',
      },
    },

    {
      label: '工作电话',
      name: 'user_work_telephone',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '电子邮件',
      name: 'user_email',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: 'QQ号码',
      name: 'user_qq',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '微信',
      name: 'user_wechat',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '住址',
      name: 'user_address',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '邮政编码',
      name: 'user_postal_code',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '家庭电话',
      name: 'user_home_telephone',
      type: 'a-input',
      fieldProps: {
        span: 12,
      },
    },
    {
      label: '讨论区签名档',
      name: 'user_signature',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
      },
    },
  ]);
  const formState = ref({
    imageUrl: '',
    user_name: '', // 名字
    user_nick_name: '', // 真实名字
    user_avatar: '', // 头像
    user_signature: '', // 签名
    user_mobile: '', // 手机
    user_wechat: '', // 微信
    user_gender: '', // 性别
    user_birthday: '', // 生日
    user_work_telephone: '', // 工作电话
    user_email: '', // email
    user_qq: '', // qq
    user_address: '', // 地址
    user_postal_code: '', // 邮政编码
    user_home_telephone: '', // 家庭电话号码
  });
  onMounted(() => {
    getPersonDetail();
  });

  function getPersonDetail() {
    getPersonal({
      user_id: userStore.userID,
    }).then((res) => {
      Object.assign(formState.value, res.data);
      if (formState.value.user_avatar) {
        formState.value.imageUrl = deepClone(formState.value.user_avatar);
        formState.value.user_avatar = [
          {
            url:
              import.meta.env.VITE_API_BASE_URL + formState.value.user_avatar,
          },
        ];
      } else {
        formState.value.user_avatar = [];
      }
    });
  }

  const handleSubmit = async () => {
    setLoading(true);
    if (!(await formRef.value?.checkForm())) {
      let formData = formRef.value.formModel;
      try {
        let avatar = formData.user_avatar[0].url
          ? splitUrlBySeparator(formData.user_avatar[0].url).part2
          : formData.user_avatar[0].response[0];
        const fidata = omit(formData, 'user_name', 'imageUrl');
        const res = await editPersonal({
          ...fidata,
          user_avatar: avatar,
        });
        Message.success(res.msg);
        getPersonDetail();
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    }
  };

  function splitUrlBySeparator(url, separator = 'upload/') {
    // 参数校验
    if (typeof url !== 'string' || typeof separator !== 'string') {
      return {
        success: false,
        part1: '',
        part2: '',
        error: '参数必须为字符串',
      };
    }

    // 查找分隔符位置
    const index = url.indexOf(separator);

    if (index !== -1) {
      return {
        success: true,
        part1: url.substring(0, index),
        part2: url.substring(index),
        error: '',
      };
    } else {
      return {
        success: false,
        part1: '',
        part2: '',
        error: `URL中未找到分隔符: ${separator}`,
      };
    }
  }
</script>

<template>
  <div class="container">
    <a-card class="general-card" title="个人资料">
      <div style="width: 70%">
        <pro-form
          :loading="loading"
          ref="formRef"
          :form-json="formType"
          :form-data="formState"
          @search="handleSubmit"
        ></pro-form>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less"></style>
